<template>
  <div>
    <p>商品清单如下</p>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item.shopName }}{{ item.price }}元/份
      </li>
    </ul>
    <hr />
    <p>请选择购买数量</p>
    <ul>
      <li
        is="mdhcd-cmp"
        v-for="(item, index) in arr"
        :key="index"
        :item="item"
      ></li>
    </ul>
    <hr />
    总价为：{{ total }}
  </div>
</template>

<script>
import MdhcdCmp from './mdhcd_cmp.vue'
export default {
  name: 'Mdhcd',
  components: {
    MdhcdCmp,
  },
  data() {
    return {
      arr: [
        {
          shopName: '可比克薯片',
          price: 5.5,
          count: 0,
        },
        {
          shopName: '草莓酱',
          price: 3.5,
          count: 0,
        },
        {
          shopName: '红烧肉',
          price: 55,
          count: 0,
        },
        {
          shopName: '方便面',
          price: 12,
          count: 0,
        },
      ],
    }
  },
  computed: {
    total() {
      return this.arr.reduce((acc, cur) => acc + cur.count * cur.price, 0)
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="less" scoped></style>
